<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>MD5在线加密</title>
        <meta name="keywords" content="md5加密,md5在线加密,md5值,md5算法">
        <meta name="description" content="md5在线加密，输入原始字符串，得到md5加密后的md5值。">
        <link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>

    <style>
        /*IE10 and IE11*/
        .ie11-tips {
            display: none;
        }

        @media screen and (-ms-high-contrast: active),
        (-ms-high-contrast: none) {
            .ie11-tips {
                display: block;
            }
        }
    </style>
    <div class="ie11-tips">
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>本站部分功能不支持IE浏览器，如页面显示异常，请使用 Google Chrome，Microsoft Edge，Firefox 等浏览器访问本站。</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="关闭">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    </div>

    <body>
        <div class="m-top-nav"></div>
        <div class="header-wrap"></div>
        <div class="breadcrumb-wrap"></div>
        <div class="alert-wrap"></div>
        <div class="container">
            
            <div>MD5在线加密</div>
            <div>请输入要加密的内容</div>
            <div>
                <textarea id="input" class="form-control" rows="4"></textarea>
            </div>
            <div>
                <button id="encrypt" class="btn btn-primary">MD5加密</button>
            </div>
            
            <div>MD5加密结果</div>
            <div>
                <span>32位小写</span>
                </br>
                <span id="result_low32"></span>
                <button type="button" class="btn btn-outline-success btn-sm button-copy" data-clipboard-target="#result_low32">复制</button>
            </div>
            <div>
                <span>32位大写</span>
                </br>
                <span id="result_up32"></span>
                <button type="button" class="btn btn-outline-success btn-sm button-copy" data-clipboard-target="#result_up32">复制</button>
            </div>
            <div>
                <span>32位小写</span>
                </br>
                <span id="result_low16"></span>
                <button type="button" class="btn btn-outline-success btn-sm button-copy" data-clipboard-target="result_low16">复制</button>
            </div>
            <div>
                <span>16位大写</span>
                </br>
                <span id="result_up16"></span>
                <button type="button" class="btn btn-outline-success btn-sm button-copy" data-clipboard-target="#result_up16">复制</button>
            </div>
            
            <div>MD5解密</div>
            <div>解密1-8位数字</div>
            <!-- https://www.sojson.com/encrypt_md5.html -->
            <div>
                <input type="text">
            </div>
            <div>
                <button type="button" class="btn btn-outline-success btn-sm button-copy" data-clipboard-target="#result_up16">解密</button>
            </div>

        </div>
        <div class="footer"></div>
        
        <!-- http://www.staticfile.org/ -->
        <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.staticfile.org/clipboard.js/2.0.8/clipboard.min.js"></script>
        <script src="https://cdn.staticfile.org/crypto-js/3.1.2/components/core.js"></script>
        <script src="https://cdn.staticfile.org/crypto-js/3.1.2/components/cipher-core.js"></script>
        <script src="https://cdn.staticfile.org/crypto-js/3.1.2/components/hmac.js"></script>
        <script src="https://cdn.staticfile.org/crypto-js/3.1.2/components/aes.js"></script>
        <script src="https://cdn.staticfile.org/crypto-js/3.1.2/components/md5.js"></script>
        <script lang="javascript">
            // 使用 CryptoJS 库
            // var hash = CryptoJS.MD5('message');
            // var low32 = hash.tostring() 得到 32位小写字符串
            // var up32 = low32.toUpperCase();
            // var low16 = low32.substr(8, 16);
            // var up16 = up32.substr(8, 16);
            
            // 1-8位数字的md5解密, 原理时查表法, 调用现成的接口
            // https://www.sojson.com/auth_v_1_0/encrypt/decodeMD5.shtml
            // 可以使用后端服务来调用该接口
            // 
            var textarea = $('#input')[0]
            var result_low32 = $('#result_low32')[0]
            var result_up32 = $('#result_up32')[0]
            var result_low16 = $('#result_low16')[0]
            var result_up16 = $('#result_up16')[0]
            $(function() {
                $('#input').on('input', function(data) {
                    if (textarea.value) {
                        result_low32.innerText = CryptoJS.MD5(textarea.value).toString()  
                        result_up32.innerText = result_low32.innerText.toUpperCase()
                        result_low16.innerText = result_low32.innerText.substr(8, 16)
                        result_up16.innerText = result_up32.innerText.substr(8, 16)  
                    }
                })
            })
        </script>
    </body>
</html>
